<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>自动精准推送规则管理</title>
    <link rel="stylesheet" href="static/lib/layui/css/layui.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/Constants.js"></script>
    <script type="text/javascript" src="static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="static/js/boUtil.js"></script>
    <style type="text/css">
        .divContent {
            margin-left: 10px;
            margin-top: 10px;
        }

        .layui-table-view .layui-form-checkbox[lay-skin=primary] i {
            width: 18px;
            height: 18px;
            line-height: auto;
            margin-top: 6px;
        }
    </style>
</head>


<%------------------------------------以下内容保持和marketing一致----------------------------%>

<body>
<%--step.1 查询条件区域begin--%>
<form class="layui-form" action="" style="margin-top: 20px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商户编号</label>
            <div class="layui-input-inline">
                <input type="text" id="shopId" name="shopId" lay-verify="shopId" autocomplete="off" placeholder="商户编号"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">商户名称</label>
            <div class="layui-input-inline">
                <input type="text" name="shopName" lay-verify="shopName" autocomplete="off" placeholder="商户名称"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" lay-filter="aihao">
                    <option value=""></option>
                    <option value="1">开启</option>
                    <option value="2">关闭</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开通日期</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="开始日期" name="openBeginTime" id="openBeginTime">
            </div>
            <div class="layui-form-mid">--</div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="截止日期" name="openEndTime" id="openEndTime">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="demo2">查询</button>
            <a class="layui-btn layui-btn-normal" href="/addSendRule">新增</a>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <div class="layui-form-item">
    </div>
</form>


<div class="divContent">
    <table id="item-list" lay-filter="operation">
        <script type="text/html" id="optionBar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </table>
</div>


<script>
    // 地址统一定义
    var url = host + "/thtml/mif/getMifServerPost/autoSendRule/queryByCondition.thtml";//查询
    var updateStatusUrl = host + "/thtml/mif/getMifServerGet/autoSendRule/updateStatus.thtml";//更改状态
    var addSendRuleUrl = "/addSendRule";//添加


    //step.0 列表查询
    layui.use(['table', 'form'], function () {
        var table = layui.table
            , form = layui.form;
        // 请求参数
        var requestParam;
        getTableData();
        form.on('submit(demo2)', function (data) {
            requestParam = {orderByClause: " create_date desc "};
            console.log(data.field.shopName == "");
            if (!isNull(data.field.shopId)) {
                requestParam.shopId = data.field.shopId;
            } else if (!isNull(data.field.shopName)) {
                requestParam.shopName = data.field.shopName;
            } else if (!isNull(data.field.openBeginTime)) {
                requestParam.openBeginTime = data.field.openBeginTime;
            } else if (!isNull(data.field.openEndTime)) {
                requestParam.openEndTime = data.field.openEndTime;
            } else if (!isNull(data.field.status)) {
                requestParam.status = data.field.status;
            }
            getTableData();
            return false;
        });


        function getTableData() {
            table.render({
                elem: '#item-list'
                , height: 500
                , url: url //数据接口
                , where: requestParam //如果无需传递额外参数，可不加该参数
                , method: 'post'
                , request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "成功", //解析提示文本
                        "count": res.data.totalRow, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , page: true //开启分页
                , cols: [[ //表头
                    {type: 'checkbox'}
                    , {field: 'id', title: 'Id', sort: true}
                    , {field: 'shopId', title: '商户编号'}
                    , {field: 'shopName', title: '商户名称'}
                    , {
                        field: 'createDate', title: '规则开通时间',
                        templet: function (row) {
                            var value = row.createDate;
                            if (value == null) {
                                return "";
                            }
                            return (value == null ? "--" : value);
                        }
                    }
                    , {
                        field: 'ruleActiveTime', title: '规则有效期',
                        templet: function (row) {
                            var begin = row.activityBeginTime;
                            var end = row.activityEndTime;
                            if (begin == null && end == null) {
                                return "";
                            }
                            return (begin == null ? "" : begin) + "--" + (end == null ? "" : end);
                        }
                    }
                    , {field: 'ruleName', title: '规则名称'}
                    , {field: 'matchMemTotal', title: '匹配会员数'}
                    , {
                        field: 'status', title: '状态',
                        templet: function (row) {
                            var value = row.status;
                            if (value == 1)
                                return "<button class=\"layui-btn layui-btn-xs layui-btn-radius layui-btn-normal\">开启</button>";
                            else if (value == 2)
                                return "<button class=\"layui-btn layui-btn-xs layui-btn-radius layui-btn-danger\">关闭</button>";
                        }
                    }
                    , {field: 'closeReason', title: '关闭原因'}
                    , {fixed: 'right', width: 200, align: 'center', title: '操作', toolbar: '#optionBar'}
                ]]
                , even: true
                , page: true
            });
        }

        //step.1 监听操作--》 查 编 关 删
        table.on('tool(operation)', function (obj) {
            var data = obj.data;
            console.log(obj)
            if (obj.event === 'del') {
                var delUrl = updateStatusUrl + "?status=0&id=" + obj.data.id
                layer.confirm('确定删除？', function (index) {
                    fetchHttp(delUrl).then(res => {
                        if (res.code == "0000") {
                            obj.del();
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                location.href = addSendRuleUrl + "?id=" + obj.data.id + "&type=edit";
            } else if (obj.event == "close") {
                if (obj.data.status == 2) {
                    layer.alert("无需重复关闭");
                    return false;
                } else {
                    layer.confirm('确认关闭？', function (index) {
                        console.log(obj.data.status);
                        var closeUrl = updateStatusUrl + "?status=2&id=" + obj.data.id;
                        fetchHttp(closeUrl).then(res => {
                            if (res.code == "0000") {
                                obj.update({status: 2});
                            }

                        })
                        layer.close(index);
                    });
                }
            } else if (obj.event === 'detail') {
                location.href = addSendRuleUrl + "?id=" + obj.data.id + "&type=detail";
            }
        });
    });


    /**
     * 日期控件初始化
     */
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#openBeginTime' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#openEndTime' //指定元素
        });
    });

</script>

</body>
</html>